<template>
    <div style="margin: 10px">
        <h2>小学乘法</h2>
        <div class="question">
            <b>题型{{index + 1}}:</b> {{question.content()}}
        </div>
        <br/>
        <div>
            <div>{{question.variable.chicken.name}}有
                <el-input-number size="small" v-model="answer.chicken" :disabled="solved"></el-input-number>
                {{question.variable.chicken.unit}}
                <span v-if="solved">
                    <i :class="checkPart('chicken')?'el-icon-check':'el-icon-close'"></i>
                </span>
            </div>
            <div>{{question.variable.rabbit.name}}有
                <el-input-number size="small" v-model="answer.rabbit" :disabled="solved"></el-input-number>
                {{question.variable.rabbit.unit}}
                <span v-if="solved">
                    <i :class="checkPart('rabbit')?'el-icon-check':'el-icon-close'"></i>
                </span>
            </div>
        </div>
        <el-button type="primary" @click="solve()" v-if="!solved">提交答案</el-button>
        <div v-if="solved">
            <div>
                <el-button type="primary" @click="showAnswer=true">看答案</el-button>
                <el-button type="primary" @click="redo()">再来</el-button>
                <el-button type="primary" v-if="check()" @click="next()">下一题</el-button>
            </div>
            <div v-if="showAnswer">
                <span>{{question.variable.chicken.name}}有
                <el-tag :type="question.answer.chicken===answer.chicken?'success':'danger'">
                    {{question.answer.chicken}}</el-tag>
                {{question.variable.chicken.unit}}，
                </span>
                <span>{{question.variable.rabbit.name}}有
                <el-tag :type="question.answer.rabbit===answer.rabbit?'success':'danger'">
                    {{question.answer.rabbit}}</el-tag>
                {{question.variable.rabbit.unit}}
            </span>
            </div>
        </div>
    </div>
</template>

<script>
    import {randomQuestion2, questionTemplates} from './cageData'

    export default {
        name: 'app',
        data () {
            return {
                question: questionTemplates[0],
                solved: false,
                answer: {chicken: 0, rabbit: 0},
                index: 0,
                showAnswer: false
            }
        },
        methods: {
            solve(){
                this.solved = true;
            },
            checkPart(part){
                return this.question.answer[part] === this.answer[part];
            },
            check(){
                return this.question.answer.chicken === this.answer.chicken
                    && this.question.answer.rabbit === this.answer.rabbit;
            },
            redo(){
                if (this.check()) {
                    randomQuestion2(this.question);
                }
                this.solved = false;
                this.answer = {chicken: 0, rabbit: 0};
            },
            next(){
                this.index++;
                this.solved = false;
                this.showAnswer = false;
                this.answer = {chicken: 0, rabbit: 0};
                this.question = questionTemplates[this.index];
            }
        },
        mounted(){
        }
    }
</script>

<style>

</style>
